<template>
	<div class="system-user">
		<el-row>
			<el-col :xs="4" :sm="4" :md="4" :lg="4">
				<dept-list />
			</el-col>
			<el-col :xs="20" :sm="20" :md="20" :lg="20">
				<el-card>
					<el-row>
						<conditional />
					</el-row>
					<el-row>
						<div class="btn-group">
							<el-button type="primary" plain>
								<template #icon>
									<i class="iconfont icon-add"></i>
								</template>
								<span>添加</span>
							</el-button>
							<el-button type="danger" plain>
								<template #icon>
									<i class="iconfont icon-remove"></i>
								</template>
								<span>删除</span>
							</el-button>
							<el-button type="success" plain>
								<template #icon>
									<i class="iconfont icon-import"></i>
								</template>
								<span>导入</span>
							</el-button>
							<el-button type="info" plain>
								<template #icon>
									<i class="iconfont icon-export"></i>
								</template>
								<span>导出</span>
							</el-button>
							<el-button type="info" plain @click="refresh">
								<template #icon>
									<i class="iconfont icon-reset"></i>
								</template>
								<span>刷新</span>
							</el-button>
						</div>
					</el-row>
					<el-row>
						<div v-if="userList.length > 0" class="table-group">
							<ElTable
								:key="index"
								v-loading="loading"
								:data="userList"
								border
								stripe
								highlight-current-row
								:row-style="tableRowStyle"
								size="small"
								max-height="600"
							>
								<el-table-column type="selection" align="center"> </el-table-column>
								<el-table-column label="序列" align="center" type="index"> </el-table-column>
								<el-table-column prop="userName" label="用户账户" align="center"> </el-table-column>
								<el-table-column prop="nickName" align="center" label="用户名"></el-table-column>
								<el-table-column prop="deptEntity.deptName" align="center" label="部门"></el-table-column>
								<el-table-column prop="phonenumber" align="center" label="手机号"></el-table-column>
								<el-table-column prop="status" align="center" label="状态">
									<template #default="scope">
										<el-switch
											v-model="scope.row.status"
											active-color="#13ce66"
											inactive-color="#ff4949"
											active-value="1"
											inactive-value="0"
											:loading="false"
											@change="statusChange($event, scope.row.userId)"
										/>
										<i>{{ scope.row.status }}</i>
									</template>
								</el-table-column>
								<el-table-column prop="createTime" align="center" label="创建时间" width="170px">
									<template #default="scope">
										<i class="iconfont icon-time"></i>
										{{ scope.row.createTime }}
									</template>
								</el-table-column>
								<el-table-column label="操作" align="center" width="130px">
									<template #default="scope">
										<div class="operation">
											<operation-tool
												v-for="(item, index) in operationInfo"
												:key="index"
												v-model:title="item.title"
												v-model:icon="item.icon"
												@click="refactor(item, scope.row)"
											/>
										</div>
									</template>
								</el-table-column>
							</ElTable>
							<div class="pagination">
								<el-pagination
									:current-page="queryParam.page.pageNum"
									:page-sizes="[10, 30, 100]"
									:page-size="queryParam.page.pageSize"
									layout="total, sizes, prev, pager, next, jumper"
									:total="queryParam.page.total"
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
								></el-pagination>
							</div>
						</div>
						<div v-else style="text-align: center; margin: 0 auto">
							<el-empty description="空空如也"></el-empty>
						</div>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<el-dialog v-model="userDialog" title="用户信息" width="40%" :before-close="handleClose">
			<span>This is a message</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="userDialog = false">取消</el-button>
					<el-button type="primary" @click="userDialog = false">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import DeptList from './deptList.vue';
import Conditional from './conditional.vue';
import OperationTool from '@/components/common/OperationTool.vue';
import { reactive, ref } from 'vue';
import { getUserList, changeStatus } from '@/api/user.js';
import { userStore } from '@/store';

const user = userStore();

let loading = ref(false);
let userDialog = ref(true);

const queryParam = reactive({
	page: {
		pageNum: 1,
		pageSize: 10,
		userName: undefined,
		phonenumber: undefined,
		status: undefined,
		deptId: user.nodeInfo !== undefined ? user.nodeInfo.deptId : undefined,
	},
});
let userList = ref([]);
const getUserInfo = () => {
	loading.value = true;
	getUserList(queryParam).then((res) => {
		loading.value = false;
		userList.value = res.records.records;
		queryParam.page.pageSize = res.records.size;
		queryParam.page.pageNum = res.records.current;
		queryParam.page.total = res.records.total;
	});
};
getUserInfo();
const refresh = () => {
	getUserInfo();
};

// 操作信息
const operationInfo = reactive([
	{
		title: '修改',
		icon: 'iconfont icon-refactor',
	},
	{
		title: '删除',
		icon: 'iconfont icon-remove',
	},
]);

const refactor = (item, user) => {
	console.log(user);
	if ('修改' === item.title) {
		userDialog.value = true;
	}
	console.log(item.title + ' 操作完成');
};

const tableRowStyle = () => {
	return 'background-color:#fff;';
	// return 'background-color:pink;font-size:14px;';
};

// paging
const handleSizeChange = (val) => {
	queryParam.page.pageSize = val;
	getUserInfo();
};
const handleCurrentChange = (val) => {
	queryParam.page.pageNum = val;
	getUserInfo();
};

// dialog
const handleClose = (done) => {
	done();
};

const statusChange = (val, userId) => {
	changeStatus({
		userId: userId,
		status: val,
	}).then((res) => {
		this.$message('这是一条消息提示');
	});
};
console.log(userList.value);
</script>

<style lang="scss" scoped>
.headStyle {
	text-align: center;
	.el-table__cell {
		text-align: center;
	}
}
.system-user {
	height: 100%;
	> .el-row {
		height: 100%;
		.el-card {
			height: 100%;
			margin-right: 5px;
			background-color: #f7f7f7;

			.btn-group {
				margin-top: 15px;
			}

			.table-group {
				width: 100%;
				margin-top: 15px;
				.el-table {
					background-color: black;
					::-webkit-scrollbar {
						width: 0;
					}
					.operation {
						span {
							flex: 1;
						}
					}
				}
				.el-pagination {
					display: flex;
					justify-content: flex-end;
					margin-top: 15px;
				}
			}
		}
	}
}
</style>
